$tcolor: #333;
// flex 函数
@mixin flex($jc: center, $ai: center, $fd: row) {
  display: flex;
  justify-content: $jc;
  align-items: $ai;
  flex-direction: $fd;
}
// grid  函数
@mixin grid($cloumns, $rows, $gip: 0 0) {
  display: grid;
  grid-template-columns: $cloumns;
  grid-template-rows: $rows;
  grid-gap: $gip;
}
// 文字溢出隐藏
@mixin hidden($num) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $num;
  overflow: hidden;
}
.body{
  user-select: none;
}
//单行文本溢出隐藏
.line_hidden {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.container {
  width: 1200px;
  margin: 0 auto;
}
#app {
  width: 1200px;
  margin: 0 auto;
}
// 通知栏样式
.inform {
  background-color: pink;
  width: 100%;
  height: 100px;
  width: 100%;
}
//轮播
.sideshow{
  width: 100%;
  height: 500px;
  position: relative;
  margin-bottom: 20px;
  .left,.right{
    border: none;
    background-color: transparent;
    outline: none;
    position: absolute;
    cursor: pointer;
    z-index: 9999;
    top: 50%;
    span{
      font-size: 50px;
    color: #fff;
    }
   transform: translateY(-50%);
  }
  .left{
    left: 0;
  }
  .right{
    right: 0;
  }
  .sideshowimg{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    @include flex(center,center);
    div{
      @include flex(center,center);
      width: 100%;
      height: 100%;
      flex-shrink: 0;
      position: absolute;
      left:0;
      >img{
        width: 100%;
        height: 100%;
      }
    }
    .transition{
      transition: all .5s;
    }
  }
  .location{
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    @include flex(space-around,center);
    .circle{
      cursor: pointer;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #fff;
    }
  }
}
// 商品列表样式
.commoditylist {
  width: 100%;
  @include flex(space-between,center);
  flex-wrap: nowrap;
  .commodity {
    flex-shrink: 0;
    width: 215px;
    height: 475px;
    @include flex(flex-start, center, column);
    &-i {
      width: 215px;
      height: 215px;
      @include flex();
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-info {
      font-size: 12px;
      &-price {
        font-size: 16px;
        color: #e4393c;
        margin: 20px 0 15px 0;
        > span {
          font-size: 20px;
        }
      }
      &-title {
        color: #666;
        @include hidden(2);
      }
      &-evaluate {
        color: #a7a7a7;
        margin: 12px 0;
        > span {
          color: #646fb0;
        }
      }
      &-storename {
        color: #999;
      }
      &-add {
        @include grid(57px 57px 96px, 27px);
        font-size: 12px;
        color: #999;
        margin-top: 40px;
        > div {
          border: 1px solid #ddd;
          @include flex(center, center);
        }
        .contrast {
          border-right: none;
        }
        .shopcar {
          border-left: none;
          &:hover{
              color: pink;
              cursor: pointer;
          }
          &:active{
              color: red;
          }
        }

      }
    }
  }
}
//分页
.paging{
  width: 70%;
  @include flex(space-around,center);
  margin: 10px auto;
  .btn{
    padding: 3px;
    background-color: #ddd;
    border: 1px solid #B0AFB0;
    color: #333;
    @include flex;
    &:hover{
      cursor: pointer;
    }
  }
  .go {
    @include flex;
    input{
      width: 30px;
      height: 20px;
      border: 1px solid #767676;
      text-align: center;
    }
  }
  .pagenum{
    @include flex(space-between);
    &-son{
      width: 30px;
      padding: 2.5px;
      border: 1px solid #767676;
      @include flex;
      &:hover{
        cursor: pointer;
      }
    }
  }
}
// 地址栏
.address {
  width: 100%;
  margin-bottom: 15px;
  @include flex(space-between, center);
  &-allcommodity {
    color: #e2231a;
    font-size: 16px;
    font-weight: bold;
    > span {
      font-size: 14px;
    }
  }
  &-to {
    @include flex(flex-start);
    &-text {
      margin-right: 10px;
    }
  }
}

// 购物车

.shopCar {
  //菜单栏
  margin-bottom: 55px;
  .tool {
    width: 100%;
    background-color: #f3f3f3;
    border: 1px solid #e9e9e9;
    font-size: 14px;
    @include grid(135px 455px repeat(4, 1fr), 45px);
    > div {
      @include flex(flex-start);
    }
    &-all {
      margin-left: 13px;
    }
    &-price,
    &-num,
    &-allprice,
    &-handle {
      @include flex(center);
    }
  }
  //商家信息
  .store {
    width: 100%;
    &-info {
      width: 100%;
      height: 40px;
      margin-left: 13px;
      @include flex(flex-startt);
      &-name {
        color: #666;
        font-size: 16px;
        margin-left: 13px;
      }
    }
    &-line {
      height: 3px;
      width: 100%;
      background-color: #aaaaaa;
    }
    //商品信息
    .shoplist {
      @include grid(45px 545px repeat(4, 1fr), 80px);
      box-sizing: border-box;
      padding: 15px 0 25px 0;
      background-color: #fff4e8;
      > input {
        margin-left: 17px;
      }
      &-commodity {
        @include grid(80px 205px 40px, repeat(4, 20px), 5px 25px);
        &-i {
          width: 80px;
          height: 80px;
          grid-area: 1/1/5/2;
          @include flex;
          img {
            width: 100%;
            height: 100%;
          }
        }
        &-title {
          color: #333;
          font-size: 12px;
          grid-area: 1/2/3/3;
          line-height: 22px;
          @include hidden(2);
        }
        &-color {
          font-size: 12px;
        }
        &-size {
          font-size: 12px;
        }
        &-server {
          @include flex(flex-start);
          div {
            width: 17px;
            height: 17px;
            background-color: red;
            margin-right: 5px;
            @include flex;
            span {
              color: #fff;
              font-size: 12px;
            }
          }
        }
      }
      &-price,
      &-allprice {
        @include flex(center, flex-start);
      }
      &-num {
        @include flex(flex-start, center, column);
        &-step {
          width: 80px;
          height: 20px;
          @include flex(flex-start);
          border: 1px solid #cbcbcb;
          .reduce {
            width: 17px;
            height: 20px;
            background-color: #f1f1f1;
            border-right: 1px solid #cbcbcb;
            @include flex;
            &:hover{
              cursor: pointer;
            }
          }
          input {
            width: 45px;
            height: 20px;
            border: none;
            text-align: center;
          }
          .add {
            width: 17px;
            height: 20px;
            background-color: #f1f1f1;
            border-left: 1px solid #cbcbcb;
            @include flex;
            &:hover{
              cursor: pointer;
            }
          }
        }
        .have {
          font-size: 12px;
          color: #c8b1aa;
        }
      }
      &-tool {
        font-size: 15px;
        color: #666;
        @include flex(flex-start, center, column);
        .delete{
          &:hover{
            cursor: pointer;
            text-decoration: underline;
          }
        }
      }
    }
  }
}


.accountbox {
  width: 100%;
  height: 55px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  .account {
    margin: 0 auto;
    width: 1200px;
    height: 100%;
    font-size: 12px;
    @include grid(50px 95px 60px 60px 1fr 100px 125px 90px, 55px, 0 10px);
    > div {
      @include flex;
    }
    &-delete{
      &:hover{
        text-decoration: underline;
        cursor: pointer;
      }
    }
    &-clear{
      &:hover{
        text-decoration: underline;
        cursor: pointer;
      }
    }
    &-choose {
      grid-column-start: 6;
      &-num {
        color: #e2231a;
      }
    }
    &-allprice {
      &-num {
        color: #e2231a;
        font-size: 20px;
      }
    }
    
    .gobuy {
      width: 90px;
      height: 100%;
      background-color: #e64347;
      @include flex;
      font-size: 19px;
      font-weight: bold;
      color: #fff;
    }
  }
}
